<template>
  <div class="section" ref="parent">
    <div class="border-row"></div>
    <div class="border-col"></div>
    <div class="section-header">专业分布</div>
    <div ref="charts" :style="chartsDom" v-show="jz"></div>
             <animae-jz   :style="chartsDom" v-if="!jz"></animae-jz>
  </div>
</template>
<script>
export default {
  props: ['height','dateProp'],
  data() {
    return {
      chartsDom: null,
      chartsData: [],
      jz:true
    }
  },
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 30 + 'px',
        height: this.height - 30 - 31 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
    margin-top 20px
</style>